
<style>
    input{margin: 10px 0;}
</style>
<form action="">
    账号:&emsp;<input type="text" id="uname"><br />
    密码:&emsp;<input type="password" id="pwd"><br />
    验证码:<input type="text" id="captcha">
    <img src="http://kg.zhaodashen.cn/v1/public/captcha.jsp" alt=""><br />
    <input type="checkbox" id="checkbox">7天免登录<br />
    <input type="submit">
</form>

<script src="./axios.js"></script>
<script>
    // 1 绑定登录按钮绑定点击事件
    document.querySelector('input[type = submit]').onclick = async function(evt){
    // 2 事件处理函数中 - 阻止浏览器默认动作
    let e = evt || window.event
    e.preventDefault()
    // 2.1 事件处理函数中 - 获取ipt数据
    let uname = document.querySelector('#uname').value
    let pwd = document.querySelector('#pwd').value
    let captcha = document.querySelector('#captcha').value
    // 3 事件处理函数中 - 请求接口
    let res = await post('http://kg.zhaodashen.cn/v1/public/login.jsp',
    {
        uname,
        pwd,
        captcha
    },'json'
    )
    // console.log(res);
    // 4 事件处理函数中 - 获取接口数据之后进行判断 - 成功就创建h5数据  失败弹出提示
    if(res.meta.state === 200){
        if(document.querySelector('#checkbox').checked){
            localStorage.setItem('uname',res.data.uname)
            localStorage.setItem('expires',(new Date).getTime() + 1000*60*60*24*7)
            // localStorage.setItem('expires',(new Date).getTime() + 1000*5)
        } else {
            sessionStorage.setItem('uname',res.data.uname)
        }
    // 4.1 事件处理函数中 - 跳转页面
    location.href = './会员页面.html'
    } else {
        alert(res.meta.msg)
    }


}
    // 5 绑定验证码点击更新事件
    document.querySelector('img').onclick = function (){
        this.src = `http://kg.zhaodashen.cn/v1/public/captcha.jsp?`+(new Date).getTime()
    }

</script>